<?php include _include(APP_PATH.'view/htm/header.inc.htm');?>
<style>
.bg-inverse { background-color: #0c3758 !important; }
.bg-inverse a { color: #6294b5; }
.dropdown-item { padding: 5px 20px; }

#nav_user_avatar {
	padding: 0px; border: 0px;
}
#nav_user_avatar:hover {
	background: none;
}
@keyframes animation_to_bottom {0% { height: 00%; } 100% { height: 100%; } }
@keyframes animation_to_top {0% { height: 100%; } 100% { height: 0%; } }
@keyframes animation_to_left {0% { width: 100%; } 100% { width: 0%; } }
@keyframes animation_to_right {0% { width: 0%; } 100% { width: 100%; } }

@keyframes kanxue_snow {
	0% { opacity: 0; } 
	50% { opacity: 0.5; transform: rotate(180deg);} 
	100% { transform: rotate(0deg); opacity: 0; bottom: 0;} 
} 
/* pointer-events: none 忽略该 DIV 的事件 */
.snow { animation: kanxue_snow 20s linear; pointer-events: none}

/*
.anmination-to-bottom { animation: animation_to_bottom 0.5s ease; animation-iteration-count: 1; animation-fill-mode: forwards}
.anmination-to-top { animation: animation_to_top 0.5s ease; animation-iteration-count: 1; animation-fill-mode: forwards}
.anmination-to-left { animation: animation_to_left 0.5s ease; animation-iteration-count: 1; animation-fill-mode: forwards}
.anmination-to-right { animation: animation_to_right 0.5s ease; animation-iteration-count: 1; animation-fill-mode: forwards}
*/

#nav_user_dropdown { position: fixed; right: 40px; top: 4px; z-index: 10; }

@media (max-width: 768px) {
	#frame_left {display: none;}
	#frame_nav {display: none;}
	#mobile_nav {display: block;}
	#nav_user_dropdown { position: fixed; right: 10px; top: 6px; }
	.xn-dropdown a { color: #6294b5; }
}
@media (min-width: 992px) {
	#frame_left {display: block;}
	#frame_nav {display: block;}
	#mobile_nav {display: none;}
}
@media (min-width: 1400px) {
	#frame_nav { width: 170px; min-width: 170px; }
	#frame_nav ul > li { width: 170px; min-width: 170px; }
	#frame_nav ul > li > a { width: 100%; }
	#frame_nav ul > li > a > span { display: inline-block;}
}
	
.breadcrumb {border-left: none; border-top: none; border-right: none; border-radius: 0;}
.sublist {padding-bottom: 0.5rem; }
.sublist, .sublist li { font-size: 0.7rem; font-weight: normal;}
.sublist > li {  border: 1px solid #bbb; border-radius: 20px; margin-bottom: 0.6rem; }
.nav-pills .nav-link { padding: 0.2rem 0.7rem !important; border-radius: 20px !important; }

/* fix bootstrap 4 */
.forumlist { text-align: left; }
.forumlist .nav-item { margin-left: 0px !important; }
.forumlist .nav-item { float: none; }

#nav_forum_toggle_menu {
	overflow: auto;
}
.scroll-1::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}
.scroll-1::-webkit-scrollbar{
	width: 12px;
	background-color: #F5F5F5;
}
.scroll-1::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

#nav_top_toggle_menu { }
#nav_top_toggle_menu ul { padding: 0.5rem 0rem; margin: 0px;}
#nav_top_toggle_menu li { list-style: none; font-size: 0.9rem; }
#nav_top_toggle_menu li:hover { background: rgba(0,0,0,1);}
#nav_top_toggle_menu a { line-height: 2.5rem; display: block; text-indent: 0.5rem;  color: rgba(255,255,255,0.8); }
#nav_top_toggle_menu a:hover { background: rgba(0,0,0,1); color: rgba(255,255,255,1); }

.icon-digest-2:before { color: #5BC0DE; text-shadow: 0 0 3px #AFE4FF;}
.icon-digest-1:before { content: "\f0a5";  color: #5BC0DE;}

.icon-digest-1:after { content: ""; font-size: 9px;  color: #5BC0DE;}
.icon-digest-2:after { content: "优"; font-size: 9px;  color: #5BC0DE;  text-shadow: 0 0 3px #AFE4FF;}
.icon-digest-3:after { content: "精"; font-size: 9px;  color: #D53D38;}

</style>
<?php
	define('WWW_KANXUE_COM', DEBUG ? 'http://www.kan.com/' : 'http://www.kanxue.com/');
	define('CE_KANXUE_COM', DEBUG ? 'http://ce.kan.com/' : 'http://ce.kanxue.com/');
	define('BOOK_KANXUE_COM', DEBUG ? 'http://book.kan.com/' : 'http://book.kanxue.com/');
	define('BBS_KANXUE_COM', DEBUG ? 'http://bbs.x.com/' : 'http://bbs.pediy.com/');
?>
<div id="mobile_nav">
	<!-- 手机导航 -->
	<table width="100%" class="hidden-lg-up navbar-nav bg-inverse">
		<tr>
			<td width="100">
				<a class="icon-navicon xn-toggle m-l-1" data-target="#nav_top_toggle_menu"></a>
				<div id="nav_top_toggle_menu" style="position: fixed; z-index: 200; left: 0px; top: 38px; opacity: 0.95; min-width: 120px; background:rgba(9,66,110,0.95); display: none;">
					<ul>
						<li title="首页"> <a href="<?php echo WWW_KANXUE_COM;?>"><i class="icon-home"></i> 首页</a> </li>
						<li title="众测"> <a href="<?php echo CE_KANXUE_COM;?>"><i class="icon-bug"></i>  众测</a> </li>
						<li title="众测"> <a href="<?php echo CE_KANXUE_COM;?>"><i class="icon-medkit"></i>  众测</a> </li>
						<li title="阅读"> <a href="<?php echo BOOK_KANXUE_COM;?>"><i class="icon-book"></i> 阅读</a> </li>
						<li title="CTF"> <a href="<?php echo BOOK_KANXUE_COM;?>"><i class="icon-book"></i> CTF</a> </li>
						<li title="论坛"> <a href="<?php echo BBS_KANXUE_COM;?>"><i class="icon-comment"></i> 论坛</a> </li>
					</ul>
				</div>
			</td>
			<td align="center">
				<div>
					<a class="btn xn-toggle dropdown-toggle" data-target="#nav_forum_toggle_menu">
						<?php if($header['mobile_title']) { ?>
							<?php echo $header['mobile_title'];?>
						<?php } else { ?>
							选择版块
						<?php } ?>
					</a>
					<div class="scroll-1" id="nav_forum_toggle_menu" style="position: absolute; left: 0px; z-index: 1000; margin-top: 0px; width: 100%; height: 100%; background: rgba(9,66,110,0.95); display: none;">
						<?php include _include(APP_PATH.'plugin/xn_body_column_3/overwrite/view/htm/_forum_nav.inc.htm');?>
					</div>
				</div>
			</td>
			<td width="100" align="right">
				

			</td>
		</tr>
	</table>
</div>

<div id="frame">
	<div id="frame_nav">
		<ul>
			<!--<li>	
				<a href="./"> <span class="logo"></span> <span>首页</span></a>
			</li>-->
			<li data-toggle="tooltip" data-placement="right" data-trigger="hover">
				<a href="" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="首页"><i class="icon-home"></i> <span>首页</span></a>
			</li>
			<li>
				<a href="" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="众测"><i class="icon-medkit"></i> <span>众测</span></a>
			</li>
			<li>
				<a href="" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="阅读"><i class="icon-book"></i> <span>阅读</span></a>
			</li>
			<li>
				<a href="" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="CTF"><i class="icon-flag-checkered"></i> <span>CTF</span></a>
			</li>
			<li>
				<a href="./" class="active" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="论坛"><i class="icon-comment"></i> <span>论坛</span></a>
			</li>
			<li style="position: absolute; bottom: 0;">
				
				<?php if(empty($uid)) { ?>
					<a class="nav-link m-r-xs" href="<?php echo url('user-login');?>"> <i class="icon-user  icon-2x"></i><span>登陆</span></a>
				<?php } else { ?>
					<a href="./" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="我的主页"><i class="icon-user"></i> <span>我的主页</span></a>
					<a href="<?php echo DEBUG ? '' : '';?>" data-toggle="tooltip" data-placement="right" data-trigger="hover" title="设置"><i class="icon-cog"></i> <span>设置</span></a>
					<a href="./"  data-toggle="tooltip" data-placement="right" data-trigger="hover" title="退出"><i class="icon-sign-out"></i> <span>退出</span></a>
				<?php } ?>
			</li>
		</ul>
	</div>
	<div id="frame_left">
		<slot name="slot1" />
	</div>
	<div id="frame_right">
		<div id="body">
			<div id="nav_user_dropdown">
				<?php if($uid) { ?>
				<div class="xn-dropdown">
					<a class="btn dropdown-toggle" href="https://example.com" id="nav_user_avatar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<img src="<?php echo $user['avatar_url'];?>"" class="avatar-xs"/>
					</a>
					<div class="dropdown-menu" aria-labelledby="nav_user_avatar" style="margin-top: 0px;">
						<a class="dropdown-item small" href="<?php echo url('thread-create');?>"><i class="icon-comment"></i> <span>发新帖</span></a>
						<a class="dropdown-item small" href="<?php echo url('my');?>"><i class="icon-cog"></i> <span>设置</span></a>
						<a class="dropdown-item small" href="<?php echo url('user-logout');?>"><i class="icon-sign-out"></i> 退出</a>
					</div>
				</div>
				<?php } else { ?>
				<div>
					<a href="<?php echo url('user-login');?>" class="small"><i class="icon-sign-in grey"></i> 登陆</a>
				</div>
				<?php } ?>
			</div>
			<slot name="slot2" />
		</div>
	</div>
<div>

<?php include _include(APP_PATH.'view/htm/footer.inc.htm');?>

<script>
$('#nav_pc li[fid="<?php echo $fid;?>"]').tab('show');

// 随机雪花
var jframe_left = $('#frame_left');
jframe_left.css('position', 'relative');
jframe_left.now = Date.now();
var jsnow = $('<span style="background: url(plugin/kanxue/img/snow.png); background-size: cover; width: 32px; height: 32px; z-index:1;"></span>').appendTo('body').hide();
var jframe_left_height = jframe_left.height();
jframe_left.on('mousemove', function(e) {
	// 随机生成雪花，飘落 css3
	var t = Date.now();
	if(t - jframe_left.now < 500) return;
	jframe_left.now = t;
	var jclone = jsnow.clone().appendTo(jframe_left).show();
	var rand = xn.random(5, 40);
	jclone.css('position', 'absolute').css('left', e.clientX - 60).css('bottom', jframe_left_height - e.clientY).width(rand).height(rand).addClass('snow');
	setTimeout(function() {
		jclone.remove();
	}, 20000);
});
</script>, 